import React, { Component } from 'react'
import { List, InputItem, Picker, TextareaItem, Flex } from 'antd-mobile';
import styles from './index.module.scss'
import MyNavBar from '../../../components/MyNavBar'
// 房屋类型
const roomTypeData = [
  { label: '一室', value: 'ROOM|d4a692e4-a177-37fd' },
  { label: '二室', value: 'ROOM|d1a00384-5801-d5cd' },
  { label: '三室', value: 'ROOM|20903ae0-c7bc-f2e2' },
  { label: '四室', value: 'ROOM|ce2a5daa-811d-2f49' },
  { label: '四室+', value: 'ROOM|2731c38c-5b19-ff7f' }
]
export default class CitySelect extends Component {
  constructor(props){
    super(props)
    this.state = {
      // 小区的名称和id
      community:'',
      // 价格
      price: '',
      // 面积
      size: '',
      // 房屋类型
      roomType: '',
      // 楼层
      floor: '',
      // 朝向：
      oriented: '',
      // 房屋标题
      title: '',
      // 房屋图片
      houseImg: '',
      // 房屋配套：
      supporting: '',
      // 房屋描述
      description: ''
    }
  }
 
  componentDidMount(){}
  render() {
    const Item = List.Item
    const { history } = this.props
    const {
      community,
      price,
      roomType,
      floor,
      oriented,
      description,
      tempSlides,
      title,
      size
    } = this.state
    return (
      // 发布房源页面
      <div className={styles.root}>
        <div className={styles.rooms}>
            <MyNavBar></MyNavBar>  
        </div>
        <List
         className={styles.header}
          renderHeader={() => '房源信息'}
          data-role="rent-list"
        >
        {/* 选择所在小区 */}
        <Item
            extra={'请输入小区名称'}
            arrow="horizontal"
            onClick={() => history.replace('/rent/search')}
          >
            小区名称
          </Item> 
            {/* 相当于 form 表单的 input 元素 */}

            <InputItem
              placeholder="请输入租金/月"
              extra="￥/月"
              value={price}
              onChange={val => this.getValue('price', val)}
            >租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金</InputItem>  


            <InputItem
              placeholder="请输入建筑面积"
              extra="m2"
              value={size}
              onChange={val => this.getValue('size', val)}
            >价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</InputItem>  

          {/* 户型 */}
          <Picker
           data={roomTypeData} 
           cols={1}  
           value={[roomType]}
           onChange={val => this.getValue('roomType', val)}
           className="forss">
          <Item arrow="horizontal">户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</Item>
        </Picker> 
        </List>
      </div>
    )
  }
}
